<template>
	<div class="nav-header">
		<i-button class="pull-left btn-spread"
		          type="text"
		          @click="spreadClick">
			<Icon type="navicon"
			      size="32"></Icon>
		</i-button>
		<div class="user-box">
			<Dropdown @on-click="userClick"
			          trigger="click"
			          class="user-nav">
				<Icon type="person"></Icon>{{user.account_name}}
				<Icon type="arrow-down-b"></Icon>
				<DropdownMenu slot="list">
					<DropdownItem name="info">
						我的信息
					</DropdownItem>
					<DropdownItem name="pwd">
						修改密码
					</DropdownItem>
				</DropdownMenu>
			</Dropdown>
			<div class="pull-left">
				<Icon type="briefcase"></Icon>
				<Button @click="transferModal=true"
				        class="btn-transfer"
				        type="text">{{user.current_tenantry && user.current_tenantry.name}}
					<Icon type="arrow-swap"></Icon>
				</Button>
			</div>
			<div class="pull-left skin-icon"
			     @click="getSkin">
				<Icon :type="skin?'ios-analytics':'ios-analytics-outline'"></Icon>
			</div>
			<div class="pull-left pin-icon"
			     :class="{active:pin}"
			     @click="setPin(!pin)">
				<Icon type="pin"></Icon>
			</div>
			<div v-if="!isChrome"
			     class="pull-left browser-box">
				<span>
					<Icon type="information-circled"></Icon> 建议使用chrome浏览器</span>
			</div>
			<!--
            <a class="older-link" href="https://old.quickcollect.kuaicuishou.com" target="_blank">旧版入口</a>
            -->
			<PasswordModal v-model="pwdModal"></PasswordModal>
			<CollectorModal v-model="collectorModal"></CollectorModal>
			<LoginModal></LoginModal>
			<TransferModal v-model="transferModal"></TransferModal>
		</div>
		<div class="header-middle">
			<span class="env-box"
			      v-if="env.name">
				<span class="env-name">
					<Icon :type="env.icon"></Icon> {{env.name}} {{app}} </span>
				<Button v-if="dev"
				        type="ghost"
				        icon="android-map">model viewer</Button>
				<layer  v-if="dev"
								:shadow="true"
								v-model="devConfigModal"
								@on-show="devConfigModalInit"
								class="inline-block">
					<Button @click="devConfigModal = !devConfigModal"
					        type="ghost"
									slot="button"
					        icon="android-options">dev server</Button>
					<DevConfigModal slot="body" ref="dev" @close="devConfigModal = false">
					</DevConfigModal>
				</layer>
				<!-- <Button v-if="dev"
								@click="devConfigModal = !devConfigModal"
				        type="ghost"
				        icon="android-options">dev server</Button> -->
			</span>
		</div>
		<phonebar v-if="hasPhone"
		          class="phonebar-box"></phonebar>
			<i-button class="pull-right btn-top"
			          v-if="env.dev"
			          type="text">
				<Icon type="email"
				      size="20"></Icon>
			</i-button>
		<i-button class="pull-right btn-top btn-logout"
		          type="text"
		          @click="logoutClick">
			<Icon type="log-out"
			      size="20"></Icon>
		</i-button>
	</div>
</template>
<script>
import $ from '@/common';
import Phonebar from '@/components/phonebar/bar';
import PasswordModal from './passwordModal';
import CollectorModal from './collectorModal';
import TransferModal from './transferModal';
import LoginModal from './loginModal';
import Env from '@/common/env';
import layer from '@/element/layer';
export default {
	data() {
		return {
			pwdModal: false,
			transferModal: false,
			devConfigModal: false,
			collectorModal: false,
			app: window.APP,
			env: Env,
			skin: false,
			pin: true,
			infoVisible: false,
			isChrome: navigator.userAgent.toLowerCase().indexOf('chrome') >= 0,
		};
	},
	computed: {
		hasPhone() {
			return window.App === 'cs';
		},
		dev() {
			return $.dev;
		},
	},
	methods: {
		devConfigModalInit() {
			this.$refs.dev.init();
		},
		getSkin() {
			this.skin = !this.skin;
			if (this.skin) {
				document.querySelector('body').classList.add('skin-1');
			} else {
				document.querySelector('body').classList.remove('skin-1');
			}
			$.local('skin', this.skin);
			require('@/style/skin/skin_1.less');
		},
		logoutClick() {
			this.$Modal.confirm({
				title: '系统提示',
				content: '确认登出?',
				onOk: () =>
					$.link('/service/${app}/signout', null, {
						retry: false,
						author: false,
					}).finally(() => {
						$.returnToLogin('out');
					}),
			});
		},
		spreadClick() {
			this.$emit('spreadClick');
			window.APP.$emit('spread');
		},
		userClick(code) {
			if (code === 'pwd') {
				this.pwdModal = true;
			}
			if (code === 'info') {
				this.collectorModal = true;
			}
		},
		setPwd(code) {},
		setPin(v) {
			this.pin = v;
			$.local('pin', this.pin);
			this.$emit('pinSet', this.pin);
		},
	},
	created() {
		this.user = $.User;
		if ($.local('pin') === undefined) {
			$.local('pin', true);
		}
		this.setPin($.local('pin'));
		if ($.local('skin')) {
			this.getSkin();
		}
	},
	components: {
		Phonebar,
		LoginModal,
		PasswordModal,
		CollectorModal,
		TransferModal,
		layer,
		DevConfigModal: function (resolve) {
        require(['./devConfigModal'], resolve)
    }
	},
};
</script>
<style lang="less">
.nav-header {
	display: flex;
	flex-direction: columns;
	.header-middle {
		flex: 1;
		padding: 0 32px;
	}
	.btn-transfer {
		padding-left: 0;
		padding-right: 0;
		display: inline-block;
		margin-left: -2px;
		.ivu-icon.ivu-icon-arrow-swap {
			margin-left: 4px;
		}
	}
	.btn-spread {
		height: 46px;
	}
	.skin-icon {
		cursor: pointer;
	}
	.pin-icon {
		cursor: pointer;
		&.active {
			color: #2b85e4;
		}
	}
	.env-box {
		height: 45px;
		width: 100%;
		line-height: 45px;
		text-align: center;
		display: inline-block;
		padding: 0 10px;
		background: #5c6271;
		color: #fff;
		font-size: 12px;
		.env-name{
			display: inline-block;
			margin-right: 16px;
		}
		.ivu-btn {
			color: #fff;
		}
	}
	.phonebar-box {
		width: 340px;
		margin-top: 5px;
		float: right;
		margin-right: 8px;
		display:flex;
		justify-content: space-between;
	}
	.older-link {
		margin-left: 20px;
		font-size: 12px;
	}
	.btn-logout {
		margin-right: 8px;
	}
	.btn-top {
		line-height: 48px;
		padding-top: 4px;
		padding: 0 8px;
		height: 46px;
	}
	.browser-box {
		font-size: 12px;
		color: #f9c678;
		padding-left: 16px;
	}
	.user-box {
		float: left;
		line-height: 47px;
		padding: 0;
		margin-left: -4px;
		font-size: 14px;
		.user-nav {
			position: relative;
			float: left;
			cursor: pointer;
			.ivu-select-dropdown {
				left: 24px !important;
				top: 40px !important;
			}
		}
		.ivu-icon {
			margin-left: 12px;
			margin-right: 4px;
		}
	}
}
</style>
